<template>
	<ul id='skin'>
		<li>
			<div class="left">
				<i class="iconfont icon-pifu"></i>
				<span>个性皮肤</span>
			</div>
			<div class="rightLi">
				<span class="smallFont">
					自选皮肤
				</span>
			</div>
		</li>
		<li>
			<div class="left">
				<i class="iconfont icon-maikefeng"></i>
				<span>听歌识曲</span>
			</div>
		</li>
		<li class="third">
			<div class="left">
				<i class="iconfont icon-erji-dingshirenwu"></i>
				<span>定时停止播放</span>
			</div>
		</li>
		<li>
			<div class="left">
				<i class="iconfont icon-saoyisao"></i>
				<span>扫一扫</span>
			</div>
		</li>
		<li>
			<div class="left">
				<i class="iconfont icon-naozhong"></i>
				<span>音乐闹钟</span>
			</div>
		</li>
		<li>
			<div class="left">
				<i class="iconfont icon-jiashimoshi36"></i>
				<span>驾驶模式</span>
			</div>
		</li>
		<li>
			<div class="left">
				<i class="iconfont icon-qinzi"></i>
				<span>亲子频道</span>
			</div>
			<div class="rightLi">
				<span class="smallFont">
					一键轻松育儿
				</span>
			</div>
		</li>
		<li class="last">
			<div class="left">
				<i class="iconfont icon-haoyou"></i>
				<span>优惠券</span>
			</div>
		</li>
	</ul>
</template>

<script>
</script>

<style lang="scss" scoped="">
	#skin{
		margin-bottom: 30px;
		.third{
			margin:15px 12px 0px;
		}
		.last{
			margin-bottom: 20px;
		}
	}	
	ul{
		font-size: 12px;
		color: #000;
		text-align: left;
		li{
			height: 25px;
			width: 80%;
			margin:15px 12px 0px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			span{
				margin-left: 12px;
				display: inline-block;
			}
			.over{
				text-overflow: ellipsis;
				width: 69px;
			    overflow: hidden;
			    white-space: nowrap;
			}
			.rightLi{
				display: flex;
				justify-content: flex-start;
				.smallFont{
					transform: scale(0.7);
					color: dimgray;
					text-spacing: 2px;
					text-overflow: ellipsis;
					width: 69px;
				    overflow: hidden;
				    white-space: nowrap;
				}
				.er{
					width: 20px;
					float: right;
					img{
						width: 100%;
					}
				}
			}
		}
		li:nth-child(3){
			margin:9px 0px -7px 12px;
		}
	}
</style>